<template>
  <el-dialog
    @close="close"
    title="新增&编辑预设房间"
    :visible.sync="dialog"
    width="30%">
    <el-form ref="formInline" size="mini" :rules="rules" :model="formInline" label-width="100px">
      <el-form-item prop="account" label="游戏名称">
        {{name}}
      </el-form-item>
      <el-form-item prop="count" label="房间数量">
        <el-input placeholder="请输入房间预设数量" v-model="formInline.count" ></el-input>
      </el-form-item>
      <el-form-item prop="photo" label="房间图片">
        <input accept="image/gif, image/jpeg, image/png" class="upload-file_ipt" @change="tirggerFile($event)" type="file" >
        <br>
        <img  width="68" height="68" :src="showImg" alt="">
      </el-form-item>
      <el-form-item prop="show_name" label="房间名称"  v-for="(item,index) in namelist" :key="index">
        <el-input placeholder="请输入房间名称" v-model="item.value" style="width: 250px"></el-input>
        <span @click="addRoom">
            <img height="25px" src="@/assets/add.png">
            <span>添加随机名称</span>
        </span>
        <span @click="deleteServer(index)">删除</span>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="dialog = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="onSubmit()">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
  import { addRoomAPI} from '@/api/teamhall'
  import { upload } from '@/utils/other-request'
  export default {
    name: 'PresetRoom',
    props: {
      dialog_: {
        default: false,
        type: Boolean
      },
      name: {
        type: String,
        default: null
      },
      id: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        dialog: true,
        btnLoading: false,  // 提交按钮状态
        disableAccount : false,
        showImg: null,
        namelist:[{value:""}],
        formInline: {
          gameid:this.id,
          count:'',
          name:this.name,
          password:'',
          namelist:''
        },
        roleList: [],
        rules: {
          /*password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],*/
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          roleId: [
            { required: true, message: '请选择角色', trigger: 'change' },
          ]
        }
      }
    },
    mounted() {
      this.dialog = this.dialog_
      if (this.name) {
        //this.formInline = Object.assign({}, this.model)
       // this.getDetails();
      }else{

      }
    },
    methods: {
      // 选择头像回调
      tirggerFile(event) {
        var e = event || window.event;
        this.formInline.photo = e.target.files[0];
        this.showImg = URL.createObjectURL(this.formInline.photo);
      },
      // 添加预设房间
      addRoom(){
        let inputParam = {name:''};
        this.namelist.push(inputParam)
      },
      // 删除房间名称
      deleteServer(index){
        this.namelist.splice(index,1)
      },
      // 关闭弹窗
      close() {
        this.$emit('close')
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 根据角色ID查询角色详情
      getDetails() {
        let param = {
          name:this.name
        }
        getDetailAPI(param).then(res => {
          if (res.code === 0) {
            debugger
            this.formInline.Id = res.data[0].Id
            this.formInline.account = res.data[0].admin_name
            this.formInline.name = '';
            this.formInline.password = '';
          } else {
            this.$message.error(res.message)
          }
        })
      },
      addPresetRoom(){
        debugger
        this.formInline.namelist = JSON.stringify( this.namelist);
        addRoomAPI(this.formInline).then(res => {
          debugger
          this.btnLoading = false
          if (res.code === 0) {
            this.$message.success('操作成功')
            // 操作完毕关闭弹窗
            this.dialog = false
            this.$emit('success')
          } else {
            this.$message.error("添加失败")
          }
        })
      },
      // 提交信息
      onSubmit() {
        this.$refs.formInline.validate((valid) => {
          if (valid) {
            if(this.id){
              this.btnLoading = true
              let formData = new FormData();
              formData.append("filename", this.formInline.photo);
              upload(formData).then(res => {
                this.formInline.photo = res.data.path
              }).then(() => {
                this.addPresetRoom();
              })
            }else{
              this.btnLoading = true
              let formData = new FormData();
              formData.append("filename", this.formInline.photo);
              upload(formData).then(res => {
                this.formInline.photo = res.data.path
              }).then(() => {
                this.addPresetRoom();
              })
            }
            /*if(this.formInline.Id == null || this.formInline.Id.length == 0 ){ // 增加
              let formData = new FormData()
              this.btnLoading = true
              let parm = Object.assign({}, this.formInline)
              addUserAPI(parm).then(res => {
                debugger
                this.btnLoading = false
                if (res.code === 0) {
                  this.$message.success('操作成功')
                  // 操作完毕关闭弹窗
                  this.dialog = false
                  this.$emit('success')
                } else {
                  this.$message.error(res.message)
                }
              })
            } else { // 编辑
              let formData = new FormData()
              this.btnLoading = true
              let parm = Object.assign({}, this.formInline)
              updateAdminAPI(parm).then(res => {
                debugger
                this.btnLoading = false
                if (res.code === 0) {
                  this.$message.success('操作成功')
                  // 操作完毕关闭弹窗
                  this.dialog = false
                  this.$emit('success')
                } else {
                  this.$message.error(res.message)
                }
              })
            }*/

          } else {
            this.$message.warning("请填写完整的信息")
          }
        })
        this.$emit('success')
      },
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }
</style>


